{% extends 'sub_page/base.html' %}
{% load staticfiles %}
{% load custom_tag %}
{% block content %}



<div id="main">
    <article class="col-md-9 col-md-offset-1 view clearfix">
    <h1 class="view-title">{{article.title}}</h1>
    <div class="view-meta">
      <span>{{article.user}}</span>
      <span>分类: <a href="{% url 'category' article.category.id %}" rel="category tag">{{article.category.name}}</a></span>
      <span>发布时间: {{article.date_publish|date:"Y/m/d H:i:s"}}</span>
      <span></span>
    </div>
    <div class="view-content">
        <p>{{article.content|custom_markdown}}</p>
    </div>
    <section class="view-tag">
      <div class="pull-left"><i class="fa fa-tags"></i>
          {% for tag in article.tag.all %}
          <a href="{% url 'tag' tag.name %}" rel="tag">{{tag.name}}</a>
          {% endfor %}
      </div>
    </section>
    <section class="support-author">
      <p>如果觉得我的文章对您有用，请随意打赏。您的支持将鼓励我继续创作！</p>
      <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModalpay"><i class="fa fa-cny" aria-hidden="true"></i> 打赏支持</button>
    </section>


    <section id="comments">

        <div class="comment-head clearfix">
          <div class="pull-left">{{article.related_article.all|length}}条评论</div>
          <div class="pull-right"><a href="#respond"><i class="fa fa-pencil"></i> 添加新评论</a></div>
        </div>
        <ul>
            {% for comment in comment_list %}
            <li id="comment-li-{{ comment.id }}" class="comment_li">
              <div id="comment-{{ comment.id }}">
                <div class="comment_top clearfix">
                  <div class="comment_avatar">
                      <img alt="" src="https://secure.gravatar.com/avatar/305772106b200d6fde4f9190015cea47?s=80&amp;d=wavatar&amp;r=g 2x" srcset="https://secure.gravatar.com/avatar/305772106b200d6fde4f9190015cea47?s=80&amp;d=wavatar&amp;r=g 2x" class="avatar avatar-40 photo" width="40" height="40">
                  </div>
                  <div class="pull-left">
                    <p class="comment_author">{{ comment.username }}</p>
                    <p class="comment_time">{{ comment.date_publish|date:"Y年m月d日 H:i:s"}}</p>
                  </div>
                  <div class="pull-right">
                      <a rel="nofollow" class="comment-reply-link" href="#respond" onclick="replay_to({{ comment.id }}, '{{ comment.username }}')" aria-label="回复给{{ comment.username }}">回复TA</a>
                  </div>
                </div>
                <div class="comment_text">
                    <p>{{ comment.content }}</p>
                </div>
              </div>
            </li><!-- #comment-## -->
                {% for children_comment in comment.children_comment %}
                <ol class="children">
                <li id="comment-li-{{ children_comment.id }}" class="comment_li">
                  <div id="comment-{{ children_comment.id }}">
                    <div class="comment_top clearfix">
                      <div class="comment_avatar">
                          <img alt="" src="#0bc02b765e0143efd78cd7f17ced1720.jpg" srcset="https://secure.gravatar.com/avatar/0bc02b765e0143efd78cd7f17ced1720?s=80&amp;d=wavatar&amp;r=g 2x" class="avatar avatar-40 photo" width="40" height="40">
                      </div>
                      <div class="pull-left">
                        <p class="comment_author">
                            <a href="{% url 'index' %}" rel="nofollow" target="_blank">{{ children_comment.username }}</a></p>
                        <p class="comment_time">{{ children_comment.date_publish|date:"Y年m月d日 H:i:s" }}</p>
                      </div>
                      <div class="pull-right"> </div>
                    </div>
                    <div class="comment_text"><p>{{ children_comment.content }}</p></div>
                  </div>
                </li><!-- #comment-## -->
                </ol><!-- .children -->
                {% endfor %}
            {% endfor %}
        </ul>

	    <div id="respond" class="comment-respond">
            <h4 id="reply-title" class="comment-reply-title">发表评论
                <small><label id="comment_parent_username" value=""></label></small>
            </h4>
            <form action="{% url 'comment_post' %}" method="post" id="commentform" class="comment-form">
                {% csrf_token %}
                <!-- 评论内容 -->
                <p class="comment-notes">
                    <span id="email-notes">电子邮件地址不会被公开。</span> 必填项已用
                    <span class="required">*</span>标注
                </p>
                <div class="comment form-group has-feedback">
{#                    {{ comment_form.comment }}#}
                    {{ form.comment }}
                </div>
                <!-- 评论用户 -->
                <div class="comment-form-author form-group has-feedback">
                    <div class="input-group">
                        <div class="input-group-addon"><i class="fa fa-user"></i></div>
                        {{ form.username }}
                        <span class="form-control-feedback required">*</span>
                    </div>
                </div>
                <div class="comment-form-email form-group has-feedback">
                    <div class="input-group"><div class="input-group-addon">
                        <i class="fa fa-envelope-o"></i>
                    </div>
{#                    {{ comment_form.email }}#}
                        {{ form.email }}
                    <span class="form-control-feedback required">*</span>
                    </div>
                </div>
                <!-- 用户URL -->
                <div class="comment-form-url form-group has-feedback">
                    <div class="input-group">
                        <div class="input-group-addon"><i class="fa fa-link"></i></div>
{#                        {{ comment_form.url }}#}
                        {{ form.url }}

                    </div>
                </div>
                <p class="form-submit">
                    <input name="submit" id="submit" class="btn btn-primary" value="发表评论" type="submit">
                    <input name="comment_parent" id="comment_parent" value="0" type="hidden">
                    <input name="article" id="article" value="{{ article.id }}" type="hidden">
                </p>
                <!--
                {{ comment_form.article }}
                -->
            </form>
		</div><!-- #respond -->

	    </section>
    </article>

    <section class="col-md-9 col-md-offset-1 clearfix">
    <div class="col-md-6">
        <div class="read">
          <div class="read-head"> <i class="fa fa-book"></i> 更多阅读 </div>
          <div class="read-list row">
              <ul>
                  {% for article_item in articles_more %}
                  <li>
                      <a href="{% url 'blog' article_item.id %}" title="{{ article_item.title }}">{{ article_item.title }}</a>
                  </li>
                  {% endfor %}
              </ul>
          </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="read">
            <div class="read-head"> <i class="fa fa-tags"></i> 标签云 </div>
            <div class="read-list">
                {% for tag in tags %}
                <a href="{% url 'tag' tag.name %}" style="color:{{tag.color}};font-size: {{tag.font_size}};" aria-label="{{tag.name}} ({{ tag.count }});">{{tag.name}}</a>
                {% endfor %}
            </div>
        </div>
    </div>
    </section>
</div>
<!--modal-->
<div class="modal fade" id="myModalpay" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
        <h4 class="modal-title" id="myModalLabel"><i class="fa fa-cny" aria-hidden="true"></i> 打赏支持</h4>
      </div>
      <div class="modal-body text-center">
        <p>
            <img src="{% static 'blog/imgs/AliPay.png' %}" alt="动脑的支付宝" style="margin: 0 8%;" width="180" height="180" border="0">
            <img src="{% static 'blog/imgs/WeixinPay.png' %}" alt="动脑的微信钱包" style="margin: 0 8%;" width="180" height="180" border="0">
        </p>
        <p>扫描二维码，输入您要打赏的金额</p>
      </div>
    </div>
  </div>
</div>
<!--modal-->

<div class="footer_search visible-xs visible-sm">
  <form id="searchform" action="https://tangjie.me">
    <div class="input-group">
      <input class="form-control" placeholder="搜索…" name="s" type="search">
      <span class="input-group-btn">
      <button class="btn btn-default" type="submit"><i class="fa fa-search" aria-hidden="true"></i></button>
      </span></div>
  </form>
</div>


<div id="titleBar"><a href="#header" class="toggle"></a><span class="title">CiCi</span></div>
{% endblock %}

{% block load_js %}
<!--
    <script type="text/javascript" src="{% static 'blog/js/comment-reply.js' %}"></script>
-->
<script>
    function replay_to(parrent_id, username){
        document.getElementById("comment_parent").value = parrent_id;
        document.getElementById("comment_parent_username").innerHTML = "回复给："+username;
    }
</script>
{% endblock %}